import React from 'react'
import Bottom from '../../components/Bottom';
import { List, NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

import {
  CameraOutline,
  EyeOutline,
  FolderOutline,
} from 'antd-mobile-icons'

export default function Edit() {
  const navigate = useNavigate()

  function editPanel(path) {
    navigate(path)
  }
  return (
    <div>
      <NavBar className='navbar' back={null}>编辑</NavBar>
      <List>
        <List.Item prefix={<CameraOutline />} onClick={() => editPanel('/image')}>
          图片
        </List.Item>
        <List.Item prefix={<EyeOutline />} onClick={() => editPanel('/about')}>
          关于
        </List.Item>
        <List.Item prefix={<FolderOutline />} onClick={() => editPanel('/works')}>
          作品
        </List.Item>
        </List>
      <Bottom />
    </div>
  )
}
